@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    border-color: theme('colors.gray.200');
  }

  .dark * {
    border-color: theme('colors.gray.700');
  }

  html {
    -webkit-text-size-adjust: 100%;
    font-family: theme('fontFamily.sans');
  }

  body {
    @apply bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased;
  }

  /* Scrollbar styles */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
  }
}

@layer components {
  /* Button variants */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:ring-2 focus:ring-offset-2 focus:ring-red-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors;
  }

  .btn-icon {
    @apply inline-flex items-center justify-center w-8 h-8 text-gray-500 dark:text-gray-400 bg-transparent border-0 rounded hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 focus:outline-none transition-colors;
  }

  /* Input styles */
  .input-base {
    @apply block w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent focus:outline-none disabled:bg-gray-50 dark:disabled:bg-gray-700 disabled:opacity-50 transition-colors;
  }

  /* Card styles */
  .card {
    @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm;
  }

  .card-header {
    @apply px-6 py-4 border-b border-gray-200 dark:border-gray-700;
  }

  .card-body {
    @apply px-6 py-4;
  }

  .card-footer {
    @apply px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700;
  }

  /* Email specific styles */
  .email-content {
    @apply prose prose-sm max-w-none prose-gray dark:prose-invert;
  }

  .email-content pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-xs font-mono;
  }

  .email-content blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400;
  }

  /* Status indicators */
  .status-dot {
    @apply inline-block w-2 h-2 rounded-full;
  }

  .status-dot.online {
    @apply bg-green-500;
  }

  .status-dot.offline {
    @apply bg-red-500;
  }

  .status-dot.warning {
    @apply bg-yellow-500;
  }

  /* Animation helpers */
  .animate-in {
    @apply animate-fade-in;
  }

  .animate-slide-up {
    @apply animate-slide-up;
  }
}

@layer utilities {
  /* Text selection */
  .select-text {
    user-select: text;
  }

  .select-none {
    user-select: none;
  }

  /* Focus visible only when not clicked */
  .focus-visible-only:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  /* Scrollable areas */
  .scrollable {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
  }
  
  .dark .scrollable {
    scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
  }

  /* Email preview styles */
  .email-preview {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Monospace for email headers */
  .mono {
    font-family: theme('fontFamily.mono');
  }
}
